<template>
	<view>
		<!-- navBar -->
		<custom-nav-bar title="推荐" />
		<!-- main -->
		<view class="px-4 pb-4 page-bg flex flex-col gap-4">
			<!-- 轮播图 -->
			<swiper class="rounded-lg overflow-hidden" indicator-dots autoplay circular :interval="3000" :duration="1000">
				<swiper-item v-for="item in state.bannerList" :key="item.id">
					<image class="w-full" :src="item.picurl" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<!-- 公告 -->
			<announcement />
			<!-- 每日推荐 -->
			<view>
				<common-title title="每日推荐">
					<view class="text-primary">
						<uni-icons type="calendar" size="18" color="theme(colors.primary)" />
						<text class="ml-1">{{ date.date }}号</text>
					</view>
				</common-title>
				<scroll-view scroll-x class="w-full whitespace-nowrap">
					<!-- 			<view v-for="item in 8" :key="item" class="w-[200rpx] h-[430rpx] inline-block mr-2 last:mr-0" @click="toDetail">
						<image class="w-full h-full rounded-md" src="../../static/wallpaper/preview_small.webp" mode="aspectFill" />
					</view> -->
					<view v-for="item in state.recommendList" :key="item._id" class="w-[200rpx] h-[430rpx] inline-block mr-2 last:mr-0" @click="toDetail(item._id)">
						<image class="w-full h-full rounded-md" :src="item.smallPicurl" mode="aspectFill" />
					</view>
				</scroll-view>
			</view>
			<!-- 专题精选 -->
			<view>
				<common-title title="专题精选">
					<uni-icons type="right" size="18" />
				</common-title>
				<view class="grid grid-cols-3 gap-2">
					<!-- <theme-item v-for="item in 8" :key="item" /> -->
					<theme-item v-for="item in state.classList" :key="item.id" :data="item" />
					<theme-item isMore />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import { useDate } from '@/hooks'
	import { useAppStore } from '@/store/modules'
	import { storeToRefs } from 'pinia'
	import { getHomeBanner, getClassify, getRecommend } from '@/api/home'

	const { detailList } = storeToRefs(useAppStore())
	const date = useDate()
	const state = reactive({
		bannerList: [],
		recommendList: [],
		classList: []
	})
	async function pageInit() {
		state.bannerList = (await getHomeBanner()).data || []
		state.classList = (await getClassify({ select: true })).data || []
		state.recommendList = (await getRecommend()).data || []
	}
	pageInit()

	function toDetail(id) {
		detailList.value = state.recommendList
		uni.navigateTo({
			url: `/pages/preview/index?id=${id}`
		})
	}
</script>
